<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
      <el-breadcrumb-item>
        <router-link class="router-link" :to="{path: '/training/student'}">学员列表</router-link>
      </el-breadcrumb-item>
      <el-breadcrumb-item>学员身体数据设置</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="content">
      <e-heading grade='1' style="margin-bottom:0;">学员身体数据</e-heading>
      <p class="small body-data-tips">身体数据是培训机构对学员基于不同运动类型所设置的一套基础身体技能参数，用于记录学员各项身体数据的变化，家长端可查看到相关信息。</p>
      <div>
        <el-tabs
          v-model="activeTab" 
          @tab-click="handleClick">
          <el-tab-pane v-for="item in sportsList" 
            :key="item.sportName"
            :label="item.sportName" 
            :name="item.sportType">
          </el-tab-pane>
        </el-tabs>
        <p style="margin-top: 20px;padding-left: 20px;">请选择需要展示和记录的相关身体数据</p>
        <div class="check-area">
            <el-checkbox-group v-model="checkList">
              <div v-for="(item,index) in projectList" :key="index">
                <el-checkbox :label="item.categoryName">
                {{`${item.categoryName}(${item.minValue + item.unitName}-${item.maxValue + item.unitName})`}}
                </el-checkbox>
              </div>              
            </el-checkbox-group>
        </div>
        <div class="center">
          <el-button size="small" type="primary" :disabled="!checkList.length" @click="submit">确定</el-button>
        </div>
      </div>
    </div>


  </div>
</template>
<script>
import api from 'api/train'
export default{
  mounted () {
    this.getList()
  },
  watch: {
    activeTab (val, oldVal) {
      if (val) {
        let sport = this.sportsList.find(item => {
          return item.sportType === val
        })
        if (sport && sport.listTrainBodyDataCategory) {
          this.projectList = sport.listTrainBodyDataCategory
        }
        this.checkList = []
        this.projectList.forEach(pro => {
          this.listCategoryId.length && this.listCategoryId.forEach(cate => {
            if (pro.id === cate) {
              this.checkList.push(pro.categoryName)
            }
          })
        })
        if (!this.checkList.length) { // 设置默认值
          this.checkList = ['身高', '体重']
        }
      }
    }
  },
  data () {
    return {
      activeTab: '',
      sportsList: [],
      projectList: [],
      checkList: [],
      listCategoryId: [],
      hasData: false
    }
  },
  methods: {
    handleClick () {
    },
    getList () {
      api.getStudentBodyCategory().then((res) => {
        let {listTrainBodyDataCategoryVO, listCategoryId} = res.data
        this.hasData = listCategoryId.length > 0
        this.listCategoryId = listCategoryId || []
        this.sportsList = listTrainBodyDataCategoryVO
        this.activeTab = this.sportsList[1].sportType
        this.projectList = this.sportsList[1].listTrainBodyDataCategory
        this.projectList.forEach(pro => {
          this.listCategoryId.forEach(cate => {
            if (pro.id === cate) {
              this.checkList.push(pro.categoryName)
            }
          })
        })
      })
    },
    submit () {
      let checkList = []
      this.sportsList.forEach(sport => {
        let itemList = sport.listTrainBodyDataCategory
        itemList.forEach(item => {
          if (this.checkList.includes(item.categoryName) && !checkList.includes(item.id)) {
            checkList.push(item.id)
          }
        })
      })
      api.setStudentBodyCategory({
        listCategoryId: checkList
      }).then((res) => {
        this.getList()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.body-data-tips{
  color:#666;
  padding-left:14px;
  margin-bottom: 60px;
}
.check-area{
  padding: 20px;
  background: #f5f5f5;
  color: #616161;
  margin: 20px 0;
}
</style>
<style lang="scss">
.check-area{
  .el-checkbox__label{
    color: #6c6c6c;
  }
}
</style>
